let index = layer.load(0,{shade:[0.3,'#ccc']});

$.ajax({
    url:'../server/list.php',
    dataType:'json',
    success(res){
      // 结构数据
      let {data} = res;
      // layui分页组件
      // 引入了layui之后使用use方法导入laypage
    layui.use(['laypage'], function(){
      let laypage = layui.laypage;              
      //调用分页
      laypage.render({
        elem: 'page', // 在页面中渲染分页组件的标签id
        count: data.length, // 总数据的条数
        // count:数据总条数显示 prev:上一页  next:下一页
        layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip'],
        limits:[4,8,12],
        limit:4,
        first:'首页',
        last:'尾页',
        groups:6,
        jump: function(obj){ // 页码跳转函数        
          let str = function(){ // 自调用函数执行,返回一个拼接好的html字符串
            var thisData = data.concat().splice((obj.curr -1)*obj.limit, obj.limit);          
            var arr = thisData.map(v=>`
            <div class="col-sm-6 col-md-3 text-center detail"  index=${v.id} style="cursor: pointer;">
                      <div class="thumbnail tr">
                        <img src="${v.imgpath.split('==========')[0]}" alt="...">
                        <div class="caption">
                          <p><strong>${v.name}</strong></p>
                          <p class="dian">${v.introduce}</p>
                          <p style="color: rgb(232, 94, 94);">￥${v.price}</p>
                        </div>
                      </div>
                  </div>
            `);
            return arr.join('');
          }();
          //渲染
          $('.list').html(str);
          // 关闭弹出层
          layer.close(index);
        }
      });     
    });
    }
  })


// 使用事件委托进行查看详情的跳转
$('.list').on('click','.detail',function () {
    // 获取商品的id
    let id = $(this).attr('index');
    // 将商品id存储到sessionStorage中  在跳转的页面中页面方法到商品的id
    sessionStorage.setItem('goodsId',id);
    // 跳转
    location.href = 'detail.html';
    return false
  })

$('.swiper-wrapper').on('click','.swiper-slide',function(){
    let id=$(this).attr('index');
    sessionStorage.setItem('goodsId',id);
    location.href = 'detail.html';
})